<template>
    <div class="itemChild">
        <el-input v-if="!isArray" v-model="content.key" class="KeyInput" size="mini" style="width:120px;" @input="checkChangeValue" placeholder="key值"></el-input>
        <span v-if="!isArray">：</span>
        <el-select size="mini" style="width:100px;" v-model="content.type" placeholder="类型" @change="changeEvent">
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select size="mini" v-if="content.type == 'model'" style="width:150px;" value-key="modelId" v-model="content.model" placeholder="选择模型" @change="changeModel">
            <el-option v-for="item in modelArray" :key="item.modelId" :label="item.key" :title="item.name" :value="item"></el-option>
        </el-select>
        <el-input v-model="content.annotate" size="mini" style="width:160px;" placeholder="说明" @input="checkChangeValue"></el-input>
        <i v-if="!isArray" class="deleteButtin el-icon-delete" @click="deleteEvent(index)"></i>
        <div class="responseItemChildrenBox">
            <div v-if="content.type == 'array'">
                <div class="responseItemChildrenSymbols">[</div>
                <responseItem :content="content.children" :isArray="true" :checkChangeValue="checkChangeValue"></responseItem>
                <div>]</div>
            </div>
            <div v-if="content.type == 'object'">
                <div class="responseItemChildrenSymbols" style="margin:0 0 0 -10px">{</div>
                <i class="addChildren el-icon-circle-plus" style="color : #67C23A;" @click="addChildren"></i>
                <br>
                <responseItem v-for="(item,index) in content.children" :key="'content_' + index" :content="item" :index="index" :deleteEvent="deleteChildren" :checkChangeValue="checkChangeValue"></responseItem>
                <div style="margin:0 0 0 -10px">}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';


export default {
    name: 'responseItem',
    props: ['content', 'isArray', 'deleteEvent', 'index', 'checkChangeValue'],
    data() {
        return {
            types: [
                { label: '无', value: 'none' },
                { label: '数组', value: 'array' },
                { label: '对象', value: 'object' },
                { label: '字符串', value: 'string' },
                { label: '数据模型', value: 'model' },
                { label: '数字', value: 'int' },
                { label: '其他', value: 'other' },
            ],
            modelArray: [],
        }
    },
    computed: {
        ...mapState("model", {
            models: state => state.models,
        }),
    },
    mounted() {
        for (let i = 0; i < this.models.length; i++) {
            const element = this.models[i];
            this.modelArray.push({
                name: element.name,
                key: element.key,
                modelId: element.modelId,
            });
        }
    },
    methods: {
        changeModel(value) {
            this.content.annotate = value.name;
            this.checkChangeValue();
        },
        changeEvent(value) {
            if (value != 'model') {
                this.content.model = {};
            };
            if (value == 'array') {
                this.content.children = {
                    key: '',
                    type: '',
                    model: {},
                    annotate: '',
                    children: [],
                };
            } else if (value == 'object') {
                this.content.children = [{
                    key: '',
                    type: '',
                    model: {},
                    annotate: '',
                    children: []
                }];
            } else {
                this.content.children = [];
            };
            this.checkChangeValue();
        },
        addChildren() {
            this.content.children.push({
                key: '',
                type: '',
                annotate: '',
                children: []
            });
            this.checkChangeValue();
        },
        deleteChildren(index) {
            this.content.children.splice(index, 1);
            this.checkChangeValue();
        },
    }
}
</script>

<style scoped>
    .itemChild { display: inline-block;}
    .responseItemChildrenBox { padding: 5px 0 5px 20px; }
    .responseItemChildrenSymbols { float: left; line-height: 26px; padding: 0 10px 0 0;}
    .addChildren { line-height: 26px; width: 30px; text-align: center; cursor: pointer; font-size: 20px;}
    .deleteButtin { width: 20px; height:20px ; border-radius: 50%; text-align: center; line-height: 20px; margin: 3px 5px; background: #F56C6C; color: #fff; cursor: pointer; font-size: 10px;}
</style> 